<template>
  <section class="card-foot">
      <ul>
        <li v-for="(it,i) in menus" :key="i" :class="{'active': currentIndex == i}" @click="clickMenu(i,it)">
          <img :src="currentIndex== i ? `/images/foot-icon-${it.iconIndex}-active.png` : `/images/foot-icon-${it.iconIndex}.png` " class="icon" /> {{ it.name }}
        </li>
      </ul>
  </section>
</template>

<script>
export default {
  name:'card-foot',
  props: ['currentPage'],
  data(){
    return {
      currentIndex:0,
      menus: [
        {name:'电子报',iconIndex:1,path:'/card-one'},
        {name:'今日新闻',iconIndex:2,path:'/card-three'},
        {name:'报道摘要',iconIndex:3,path:'/card-two'},
      ]
    }
  },
  created(){
    this.checkActiveStatus();
  },  
  methods:{
    clickMenu(i,t){
      this.currentIndex = i;
      console.log(t);
      this.$router.push(t.path)
    },
    checkActiveStatus(){
      this.menus.forEach((v,i) => {
        if(v.path == this.$route.fullPath){
          this.currentIndex = i
        }
      })
    }
  },
  computed:{

  }
}
</script>

<style scoped lang="scss">

  @import "&/assets/css/index.scss";

  .card-foot{
    width:100%;height:pxToRem(45px);line-height:pxToRem(45px);text-align: center;font-size:pxToRem(12px);color:#B7B7B7;background-color:#fff;position:relative;border-top:1px solid #ddd;z-index:100;
    ul{
      margin:0;padding:0;width:100%;height:100%;display:flex;flex-wrap:nowrap;justify-content: flex-start;list-style: none;font-size:pxToRem(12px);color:#B7B7B7;
      li{
        width:33.33%;height:100%;cursor:pointer;position:relative;border-right: 1px solid #E9E9E9;
        &:last-of-type{border:none;}
        img{width:pxToRem(25px);height:pxToRem(25px);position: relative;top:pxToRem(9px);left:pxToRem(-6px);}
      }
      li.active{color:#C9242B;}
    }
  }
</style>